<template>
  <div class="personnel-list flex flex-column">
    <antd-form
      ref="AntdForm"
      :options="formOptions"
      @submit="formSubmit"
      class="flex-fixed"
      style="margin-bottom: 15px"
    />
    <common-table
      ref="table"
      :fetch="getTableList"
      :fetch-params="tableParams"
      :columns="columns"
      :show-toolbar="false"
      class="flex-auto-height"
      @vue:mounted="() => $refs.table.load()"
    >
      <template #action="{ text, scope }">
        <a-button type="link" @click="details(scope)">详情</a-button>
      </template>
    </common-table>
  </div>
</template>

<script>
import get from 'lodash-es/get.js';
import { getYardSelectList, specialCrowdPersonnelList } from '@gis/lib/api';
import { useDicDataStore } from '@gis/lib/pinia/dicData.js';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { openPeopleDetailsDialog } from '../reality-people/people-details/peopleDetailsDialog.js';

export default {
  name: 'personnel-list',
  components: {},
  props: {
    extraParams: { type: Object, default: undefined },
  },
  data() {
    return {
      yardList: [],
      typeList: [], //类型列表
      formData: {},
      fieldsMap: { label: 'name', value: 'flag', num: 'value' },
      columns: [
        {
          title: '类型',
          dataIndex: 'people_type',
          customRender: (val) => this.peopleType[val],
          width: 180,
        },
        {
          title: '姓名',
          dataIndex: 'name',
          width: 100,
        },
        {
          title: '现居地',
          dataIndex: 'residence',
        },
        {
          title: '电话',
          dataIndex: 'phone',
          width: 140,
        },
        {
          title: '是否重点关注',
          dataIndex: 'level',
          customRender: (val) => (val == 2 ? '是' : '否'),
          width: 120,
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 80,
        },
      ],
    };
  },
  computed: {
    apiParams() {
      const userInfo = useUserInfoStore();
      return { area_code: userInfo.area_code };
    },
    formOptions() {
      return [
        {
          component: 'a-select',
          label: '小区',
          field: 'yard_id',
          value: get(this.extraParams, 'yard_id') || undefined,
          props: {
            showSearch: true,
            options: this.yardList,
          },
        },
        {
          component: 'a-select',
          label: '人员类型',
          field: 'type',
          value: get(this.extraParams, 'type') || undefined,
          props: {
            showSearch: true,
            options: this.dicData.getDicDataList('D0016'),
          },
        },
        {
          component: 'a-input',
          label: '姓名',
          field: 'name',
        },
        {
          component: 'a-input',
          label: '电话',
          field: 'phone',
        },
        {
          component: 'a-select',
          label: '是否重点关注',
          field: 'level',
          labelCol: 10,
          wrapperCol: 14,
          props: {
            options: [
              { label: '是', value: '2' },
              { label: '否', value: '1' },
            ],
          },
        },
      ];
    },
    tableParams() {
      return Object.assign({}, this.apiParams, this.extraParams, this.formData);
    },
    peopleType() {
      return this.dicData.getDicData('D0016');
    },
  },
  created() {
    this.getYardSelectList();
  },
  methods: {
    async getYardSelectList() {
      const data = this.handleCommonResult(await getYardSelectList(this.apiParams));
      this.yardList = data.map((item) => Object.assign({}, { label: item.yard_name, value: item.yard_id }));
    },
    async getTableList(params) {
      if (!params.area_code) return;
      const res = await specialCrowdPersonnelList(params);
      return { data: res.data.list, total: res.data.count };
    },
    formSubmit(values) {
      this.formData = values;
      this.$nextTick(() => {
        this.$refs.table.load();
      });
    },
    details(data) {
      openPeopleDetailsDialog(data);
    },
  },
  setup() {
    const dicData = useDicDataStore();
    dicData.getDicDataAsync('D0016');
    return { dicData };
  },
};
</script>

<style scoped lang="less">
.personnel-list {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .title {
    padding: 20px;
    line-height: 1;
    border-bottom: 1px solid #586777;
    text-align: left;
    font-size: 26px;
    font-weight: 500;
    color: #fefffe;
  }
}
</style>
